<template>
  <div>
    <div v-for="(value, index) in city" :key="index">
      <div
        class="city"
        @mouseenter="handler(index)"
        @mouseleave="remove(index)"
      >
        <div class="city_left">{{ value.type }}</div>
        <div class="el-icon-arrow-right"></div>
      </div>
    </div>
    <div v-if="isShow" @mouseenter="handlerList()" @mouseleave="removeList()">
      <ul v-if="city[index]">
        <li v-for="(v, i) in city[index].children" :key="i" @click="seek(v)">
          <div>
            <i>{{ i + 1 }}</i>
            <span>{{ v.city }}</span>
          </div>
          <span>{{ v.desc }}</span>
        </li>
      </ul>
    </div>
    <h4>热门城市</h4>
    <div class="img">
      <img src="http://157.122.54.189:9093/images/pic_sea.jpeg" alt="" />
    </div>
  </div>
</template>

<script>
import bus from "@/utils/EventBus";
export default {
  /**
   * 导航栏的步骤
   * 页面一进来就返送请求获取数据 定义一个变量 接收数据
   * 1 布局第一层的结构 先遍历第一成的数据
   * 2 在css 的样式中添加鼠标上移是改变颜色
   * 3 给第一层的机构添加鼠标移入和移出的功能
   * 4 添加第二层的结构 第二层添加v-if='flase'  默认不显示
   * 5 使用v-if 判断当前的下标 是否显示
   * 6 在遍历第二层的数据 当前数据的下标.要遍历的第二层数据
   * 7 渲染数据
   * 8 鼠标移入移出的处理
   */
  data() {
    return {
      city: [], // 城市的数据
      index: 0,
      isShow: false,
    };
  },
  methods: {
    // 点击第二层的数据进行搜索
    seek(v) {
      //  v 传过来就是当前的数据
      this.$axios({
        url: "/posts?city=" + v.city,
      }).then((res) => {
        /**
         * 把点击的城市名字穿个兄弟组件
         * 把城市的名字添加放到url 上
         */
        this.$router.push({ path: "/post?start=0&limit=3&city=" + v.city });
        bus.$emit("click", v);
        // 请求到的数据发送个父组件接收
        this.$emit("getData", res.data);
      });
    },
    // 鼠标移入
    handler(index) {
      this.isShow = true;
      this.index = index;
      document.querySelectorAll(".city")[index].style.borderRight = 0;
    },
    // 鼠标移出
    remove(index) {
      this.isShow = false;
      this.index = index;
      document.querySelectorAll(".city")[index].style.borderRight =
        "1px solid #ccc";
    },
    // 鼠标移入时触发
    handlerList() {
      this.isShow = true;
      document.querySelectorAll(".city")[this.index].style.borderRight = 0;
    },
    // 鼠标离开时触发
    removeList() {
      this.isShow = false;
      document.querySelectorAll(".city")[this.index].style.borderRight =
        "1px solid #ccc";
    },
  },
  mounted() {
    this.$axios({
      url: "posts/cities",
    }).then((res) => {
      this.city = res.data.data;
      console.log(this.city);
    });
  },
};
</script>
<style lang="less" scoped>
.city {
  position: relative;
  border: 1px solid #ccc;
  height: 30px;
  align-items: center;
  display: flex;
  font-size: 14px;
  padding: 0 10px;
  justify-content: space-between;
  border-bottom: none;
}
.city:hover {
  color: orange;
}
ul {
  position: absolute;
  left: 230px;
  top: 0;
  width: 350px;
  z-index: 9;
  height: 30px;
  li {
    background-color: #fff;
    display: flex;
    height: 35px;
    align-items: center;
    font-size: 14px;
    color: #666;
    div {
      i {
        font-size: 18px;
        margin: 0 5px;
      }
      width: 80px;
      color: orange;
    }
  }
}
h4 {
  height: 40px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  line-height: 40px;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}
.img {
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>